<script setup>
const activeProjects = [
  {
    title: '任务1',
    subtitle: 'Ecommerce',
    stats: '65',
    progressColor: 'error',
    executorId: 1,
    executorName: '默认执行器1',
    executorUrl: 'http://127.0.0.1:9001',
    startTime: '2023-12-05 10:00:00',
    execTime: '10:00',
  },
  {
    title: '任务2',
    subtitle: 'App UI Kit',
    stats: '86',
    progressColor: 'primary',
    executorId: 1,
    executorName: '默认执行器1',
    executorUrl: 'http://127.0.0.1:9001',
    startTime: '2023-12-05 10:00:00',
    execTime: '10:00',
  },
  {
    title: '任务3',
    subtitle: 'Calendar App',
    stats: '90',
    progressColor: 'success',
    executorId: 1,
    executorName: '默认执行器1',
    executorUrl: 'http://127.0.0.1:9001',
    startTime: '2023-12-05 10:00:00',
    execTime: '10:00',
  },
  {
    title: '任务4',
    subtitle: 'Dashboard',
    stats: '37',
    progressColor: 'info',
    executorId: 1,
    executorName: '默认执行器1',
    executorUrl: 'http://127.0.0.1:9001',
    startTime: '2023-12-05 10:00:00',
    execTime: '10:00',
  },
  {
    title: '任务5',
    subtitle: 'Website',
    stats: '22',
    progressColor: 'primary',
    executorId: 2,
    executorName: '默认执行器2',
    executorUrl: 'http://127.0.0.1:9002',
    startTime: '2023-12-05 10:00:00',
    execTime: '10:00',
  },
  {
    title: '任务6',
    subtitle: 'Website Design',
    stats: '29',
    progressColor: 'warning',
    executorId: 2,
    executorName: '默认执行器2',
    executorUrl: 'http://127.0.0.1:9002',
    startTime: '2023-12-05 10:00:00',
    execTime: '10:00',
  },
]

const activeProjectFilters = reactive([])

onMounted(() => {
  activeProjectFilters.push(...activeProjects)
})

const moreList = [
  {
    title: 'Refresh',
    value: 'refresh',
  },
  {
    title: 'Download',
    value: 'Download',
  },
  {
    title: 'View All',
    value: 'View All',
  },
]

const state = ref(0)

const states = [
  {
    name: '全部',
    id: 0,
  },
  {
    name: '默认执行器1',
    id: 1,
  },
  {
    name: '默认执行器2',
    id: 2,
  },
]

watch(state, val => {
  console.log(activeProjects)
  activeProjectFilters.length = 0
  console.log(activeProjects)
  if(val == 0){
    activeProjectFilters.push(...activeProjects)
  }else{
    const list = activeProjects.filter(project => project.executorId == val)

    activeProjectFilters.push(...list)
  }
})
</script>

<template>
  <VCard
    title="进行中的任务"
    subtitle="平均完成度：72%"
  >
    <template #append>
      <div class="mt-n4 me-n2">
        <VRow>
          <VCol>
            <VAutocomplete
              v-model="state"
              variant="outlined"
              label="任务执行器"
              :items="states"
              item-title="name"
              item-value="id"
              class="task-select-w"
            />
          </VCol>
          <VCol><MoreBtn :menu-list="moreList" /></VCol>
        </VRow>
      </div>
    </template>

    <VCardText>
      <VList class="card-list">
        <VListItem
          v-for="project in activeProjectFilters"
          :key="project.title"
        >
          <VListItemTitle class="font-weight-medium">
            {{ project.title }}
          </VListItemTitle>
          <VListItemSubtitle class="text-disabled">
            {{ project.subtitle }}
          </VListItemSubtitle>

          <template #append>
            <div class="d-flex align-center">
              <span class="text-disabled span-mr">执行器：{{ project.executorName }}（{{ project.executorUrl }}）</span>
              <span class="text-disabled span-mr">开始时间： {{ project.startTime }}</span>
              <span class="text-disabled span-mr">已耗时： {{ project.execTime }}</span>
              <div
                class="me-2"
                style="inline-size: 200px;"
              >
                <VProgressLinear
                  :model-value="project.stats"
                  :color="project.progressColor"
                  height="8"
                  rounded-bar
                  rounded
                />
              </div>
              <span class="text-disabled">{{ project.stats }}%</span>
            </div>
          </template>
        </VListItem>
      </VList>
    </VCardText>
  </VCard>
</template>

<style lang="scss" scoped>
.card-list {
  --v-card-list-gap: 19px;
}

.span-mr {
  margin-inline-end: 24px !important;
}

.task-select-w {
  inline-size: 160px;
}
</style>
